Canvas

height

const height = cvApi2.canvas.height;

style

const themeIndexColor = cvApi2.canvas.style.getThemeColorByIndex(0);

width

const width = cvApi2.canvas.width;

addEventListener

Method for attaching functions to specific triggered events. This allows methods to be called based on event operations on the canvas or based on user interactions.

function main() {
	cvApi2.canvas.addEventListener(cvApi2.enums.events.Render, render);
}

function render(){
}

Parameters

• event:Event

  The event that is being subscribed to.

• callBack:() => void

  The function to invoke when the event is triggered.

  • • (): void

    • Returns void

Returns void

getHTMLElement

Gets the visual container's parent HTML element. The parent container is the visual starting point. The custom visual's generated elements will be appended to it in the HTML DOM.

const element = cvApi2.canvas.getHTMLElement();
element.appendChild(foreignObject).appendChild(div);

Returns SVGElement

the visual container's parent HTML element.

isSelectionEnabled

Indication to enable or disable the selection of members and datapoints. Can be used to control the item selection mechanism.

const isSelectionEnable = cvApi2.resultSet.canvas.isSelectionEnabled();

Returns boolean

Indication to enable or disable the selection of members and datapoints.

notifyRenderComplete

Use this function to notify services that the visual is done rendering. Some services need to know when the render process is done for their process to work correctly. Sometimes the render process can be asynchronous, this function will let you notify those services when you are done rendering. Notice that the services will wait for your notification only if you will set "waitForCompleteNotify" as true in your visual configuration.

cvApi2.canvas.notifyRenderComplete();

Returns void

setCustomCssStyle

Set a specific CSS style for the visual. Used to add inline custom css styling to the visual logic.

function main() {
	cvApi2.canvas.setCustomCssStyle(defineStyles());
}

function defineStyles(){
    return '.axis path,'+
           '.axis line {'+
                'fill: none;'+
                'stroke: #000;'+
                'shape-rendering: crispEdges;}';
}

Parameters

• styles:string

  CSS code implementation.

Returns void

setExternalStyleSheets

Set external style sheets for the styling of the visual. Used to add entire custom style sheet documents.

cvApi2.canvas.setExternalStyleSheets(['https://kendo.cdn.telerik.com/2021.1.119/styles/kendo.default-v2.min.css']);

Parameters

• paths:string[]

  Each string represent the address for the style sheet document.

Returns void

showDataPointContextMenu

Show the 'Data Point' context menu for the selected datapoint. Provides a method to trigger the data point context menu from Pyramid. Showing the context menu gives the user more options and interactions between the visual and the data.

const datapoint = cvApi2.resultSet.data.getCurrentTrellisData().datapoints[0];

svgElement
.append("path")
.on("contextmenu", function(d) { cvApi2.canvas.showDataPointContextMenu(datapoint, d3.selection.event); });

Parameters

• datapoint:Datapoint

  A Datapoint for the context menu to interact with.

• event:MouseEvent<any, MouseEvent>

  DOM mouse event object that will trigger the context menu.

Returns void

showElementsContextMenu

Show the 'elements' context menu for the selected elements. Provides a method to trigger the member element context menu from Pyramid. Showing the context menu gives the user more options and interactions between the visual and the data.

const elements = cvApi2.resultSet.data.getCurrentTrellisData().datapoints[0].Coordinates;

svgElement
.append("path")
.on("contextmenu", function(d) { cvApi2.canvas.showElementsContextMenu(elements, d3.selection.event); });

Parameters

• elements:Element[]

  Array of elements you want the context menu to interact with.

• event:MouseEvent<any, MouseEvent>

  DOM mouse event object that will trigger the context menu.

Returns void